<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>条件语句与v-show的差异与区别</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <!-- v-if及v-else形成条件语句判断操作 -->
            <p v-if="show">You can see me!</p>
            <p v-else>Now you see me!</p>
            <!-- 这里用到了<template>标签，用于包含多个元素，
			当元素只有一个时，直接在元素上用v-if即可-->
            <template v-if="show">
                <h1>Heading</h1>
                <p>Inside a template</p>
            </template>
            <!-- TODO:区别v-if与v-show之间的差异 -->
            <button @click="show = !show">Switch</button>
        </div>
        <script type="text/javascript">
            new Vue({
                el: '#app',
                data: {
                    show: true,
                },
            });
        </script>
    </body>
</html>
